<template>
    <view class="body-view">
        <!-- 头部 -->
        <scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft">
            <block v-for="(menuTab,index) in menuTabs" :key="index">
                <view class="menu-topic-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
                    <view :class="[currentTab==index ? 'menu-topic-act' : 'menu-topic']">
                        <view class="menu-topic-txt">{{menuTab.name}}</view>
                        <view class="menu-topic-bottom">
                            <view class="menu-topic-bottom-color"></view>
                        </view>
                    </view>    
                </view>
            </block>
        </scroll-view>
    </view>
</template>

<script>
	export default {
	        data() {
	            return {
	                scrollLeft: 0,
	                isClickChange: false,
	                currentTab: 0,
	                // Tab分类标题
	               
	            }
	        },
			props: {
				menuTabs: {
					type: Array
				}
			},
			
			
	        methods: {
	            swichMenu: async function(current) { //点击其中一个 menu
	                if (this.currentTab == current) {
	                    return false;
	                } else {
	                    this.currentTab = current;
	                    this.setScrollLeft(current);
	                }
	            },
	            setScrollLeft: async function(tabIndex) {
	                let leftWidthSum = 0;
	                for (var i = 0; i <= tabIndex; i++) {
	                    let nowElement = await this.getWidth('tabNum' + i);
	                    leftWidthSum = leftWidthSum + nowElement.width;
	                }
	                let winWidth = uni.getSystemInfoSync().windowWidth;
	                this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
	            },
	            getWidth: function(id) { //得到元素的宽高
	                return new Promise((res, rej) => {
	                    uni.createSelectorQuery().select("#" + id).fields({
	                        size: true,
	                        scrollOffset: true
	                    }, (data) => {
	                        res(data);
	                    }).exec();
	                })
	            },
	        },
	    }
</script>

<style>
	/* Tab切换 */
	    .body-view .right-arrow .iconfont{
	       font-size: 24rpx;
	       font-family: iconfont;
	       color: #909399;
	    }
	    .top-menu-view {
	        display: flex;
	        white-space: nowrap;
	        width: 100%;
	        background-color: #FFFFFF;
	        height: 86rpx;
			letter-spacing: 5px;
	    }
	
	    .top-menu-view .menu-topic-view {
	        display: inline-block;
	        white-space: nowrap;
	        height:86rpx ;
	        position: relative;
	    }
	    
	    .top-menu-view .menu-topic-view .menu-topic {
	        margin-left: 30upx;
	        margin-right: 10upx;
	        position: relative;
	        height: 100%;
	        display: flex;
	        align-items: center;
	        justify-content: center;
	    }


	    .top-menu-view .menu-topic-view .menu-topic-act {
	        margin-left: 30upx;
	        margin-right: 10upx;
	        position: relative;
	        height: 100%;
	        display: flex;
	        align-items: center;
	        justify-content: center;
			overflow-x: hidden;
	    }
	   
	    .top-menu-view .menu-topic-view .menu-topic-act .menu-topic-txt {
	        font-size: 30upx;
	        color: #3d7eff;
	        font-weight: 600;
	    }

</style>
